<template>
    <div class="appInt">
        <div class="advantageBox">
            <div class="advantageItem" v-for="item in advantageList" :key="item.title">
                <img :src="item.pic" alt="advantage" />
                <p>{{ item.title }}</p>
            </div>
        </div>
        <div class="introduce">
            <div class="box">
                <h2 class="title">Matelink AI</h2>
                <h3 class="subTitle">Speak to the interactive AI chatbot that can listen and understand you with our sex
                    toys</h3>
                <p class="desc">Chat, talk, and text with our selected AI roles, or create your own. Sync your toy with
                    them
                    and let them customize your sensations, responding to your commands through engaging messages or
                    voice
                    calls.</p>
                <router-link to="/appIntroduction" class="btn">Learn More</router-link>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import icon1 from '@/assets/images/adv_icon1.svg';
import icon2 from '@/assets/images/adv_icon2.svg';
import icon3 from '@/assets/images/adv_icon3.svg';
import icon4 from '@/assets/images/adv_icon4.svg';

const advantageList = reactive([
    {
        pic: icon1,
        title: 'Free Shipping',
    },
    {
        pic: icon2,
        title: 'Discreet Packaging',
    },
    {
        pic: icon3,
        title: 'Secure Checkout',
    },
    {
        pic: icon4,
        title: '1 Year Warranty',
    }
])
</script>
<style lang="scss" scoped>
.appInt {
    background: #1F1F1F;

    .advantageBox {
        display: flex;
        height: 140px;
        align-items: center;
        justify-content: space-between;
        padding: 0 142px;
        background: #000;

        .advantageItem {
            text-align: center;
            display: flex;
            align-items: center;

            img {
                margin-right: 21px;
            }

            p {
                color: #fff;
                font-size: 24px;
                font-weight: 600;
            }
        }
    }

    .introduce {
        height: 800px;
        background: url('~@/assets/images/appInt_bg.png') no-repeat;
        padding-left: 88px;
        overflow: hidden;

        .box {
            width: 690px;
        }

        .title {
            font-size: 48px;
            font-weight: 700;
            color: #846FC1;
            margin-top: 130px;
        }

        .subTitle {
            font-size: 48px;
            font-weight: 700;
            color: #fff;
            line-height: 56px;
            margin-top: 65px;
        }

        .desc {
            font-size: 24px;
            font-weight: 400;
            color: #fff;
            line-height: 34px;
            margin-top: 40px;
        }

        .btn {
            display: inline-block;
            width: 200px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background: #846FC1;
            color: #fff;
            font-size: 20px;
            font-weight: 400;
            margin-top: 30px;
            border-radius: 12px;
        }
    }

}

@media screen and (max-width: 750px) {
    .appInt {
        .advantageBox {
            padding: 0.6rem 0.6rem 0.1rem;
            height: auto;
            flex-wrap: wrap;

            .advantageItem {
                width: 50%;
                display: block;
                margin-bottom: 0.5rem;

                img {
                    margin: 0 0 0.2rem;
                    width: 0.57rem;
                }

                p {
                    font-size: 0.24rem;
                }
            }
        }

        .introduce {
            background: url('~@/assets/images/appInt_bg_m.png') no-repeat top;
            padding: 0 0.6rem 1.3rem 1rem;
            height: auto;
            background-size: 100% auto;

            .box {
                width: auto;
            }

            .title {
                font-size: 0.48rem;
                margin-top: 5.4rem;
            }

            .subTitle {
                font-size: 0.48rem;
                line-height: 0.56rem;
                margin-top: 0.3rem;
            }

            .desc {
                font-size: 0.28rem;
                line-height: 0.34rem;
                margin-top: 0.2rem;
            }

            .btn {
                width: 2.2rem;
                height: 0.64rem;
                line-height: 0.64rem;
                font-size: 0.2rem;
                margin-top: 0.5rem;
                border-radius: 0.32rem;
            }
        }
    }

}
</style>